import React, { useEffect } from "react";
import { Card, Col, Row, Table, Button, message, Popconfirm } from 'antd';
import { useSelector } from "react-redux";
import moment from "moment";

function converTime(date) {
    return moment(date * 1000).format('YYYY-MM-DD');
}

function convert(n) {
    if (!window.web || !n) return;
    return window.web.web3.utils.fromWei(n, 'ether');
}

function getRenderOrder(order, type) {
    if (!window.web) return [];
    const account = window.web.account;
    // 排除已完成以及取消的订单
    let filterId = [...order.CancelOrders, ...order.FillOrders].map(item => item.id);
    let pendingOrders = order.AllOrders.filter(item => !filterId.includes(item.id));

    switch (type) {
        case 1:
            return pendingOrders.filter(item => item.user === account);
        case 2:
            return pendingOrders.filter(item => item.user !== account);
    }

    return pendingOrders;

    // account
}

export default function Order() {
    const order = useSelector(state => state.order);
    const columns = [
        {
            title: '时间',
            dataIndex: 'timestamp',
            key: 'timestamp',
            render: text => converTime(String(text))
        },
        {
            title: 'EAL',
            dataIndex: 'amountGet',
            key: 'amountGet',
            render: text => <b>{String(convert(text))}</b>
        },
        {
            title: 'ETH',
            dataIndex: 'amountGive',
            key: 'amountGive',
            render: text => String(convert(text))
        }
    ];
    const colums1 = [
        ...columns,
        {
            title: '操作',
            render: item =>
                <Popconfirm
                    title="取消交易"
                    description="是否取消该交易？"
                    onConfirm={() => {
                        const { exchange, account } = window.web;
                        exchange.methods.cancelOrder(item.id).send({ from: account }).then(() => {
                            // window.location.reload();
                            message.success('交易取消成功！');
                        });
                    }}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button size="small" type="primary">取消</Button>
                </Popconfirm>
        }
    ]
    const colums2 = [
        ...columns,
        {
            title: '操作',
            render: item =>
                <Popconfirm
                    title="确认买入"
                    description="是否确认买入？"
                    onConfirm={() => {
                        const { exchange, account } = window.web;
                        exchange.methods.fillOrder(item.id).send({ 
                            from: account
                        });
                    }}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button size="small" danger>买入</Button>
                </Popconfirm>
        }
    ]

    return (
        <div className="App" style={{ marginTop: "10px" }}>
            <Row gutter={16}>
                <Col span={8}>
                    <Card title="已完成交易" bordered={false} hoverable={true}>
                        <Table dataSource={order.FillOrders} columns={columns} rowKey="id" />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card title="交易中-我创建的订单" bordered={false} hoverable={true}>
                        <Table dataSource={getRenderOrder(order, 1)} columns={colums1} rowKey="id" />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card title="交易中-其他人的订单" bordered={false} hoverable={true}>
                        <Table dataSource={getRenderOrder(order, 2)} columns={colums2} rowKey="id" />
                    </Card>
                </Col>
            </Row>
        </div>
    );
}